<template>
  <!--设置-->
  <div id="reportDetail">
    <!-- <div class="header">
      <div class="header_l">原始密码</div>
      <div class="header_r">
        <input type="password"  placeholder="未设置可以不填写" v-model="old_password"></div>
      <div class="header_o"></div>
    </div>-->
    <!-- <div class="header cen">
      <div class="header_l cen_col">原始密码</div>
      <div class="header_r">
        <van-field v-model="old_password" password clearable placeholder="未设置可以不填写"></van-field>
      </div>
      <div class="header_o"></div>
    </div>
    <div class="header cen">
      <div class="header_l cen_col">新密码</div>
      <div class="header_r">
        <van-field
          v-model="pass"
          password
          clearable
          placeholder="请输入密码"
          @input="passwordInput1"
          :error-message="passwordErrorMsg1"
        ></van-field>
      </div>
      <div class="header_o"></div>
    </div>-->
    <van-cell-group>
      <!-- <van-field
        value="{{ username }}"
        required
        clearable
        label="用户名"
        icon="question-o"
        placeholder="请输入用户名"
        bind:click-icon="onClickIcon"
      />-->
      <van-field
        v-model="old_password"
        @blur="passwordBlurOld"
        @input="passwordInputOld"
        password
        clearable
        label="原始密码"
        placeholder="未设置可以不填写"
      ></van-field>
      <van-field
        v-model="pass"
        password
        clearable
        label="新密码"
        placeholder="请输入密码"
        @blur="passwordBlur"
        @input="passwordInput"
        :error-message="passwordErrorMsg"
      ></van-field>
      <van-field
        label="确认密码"
        v-bind:value="password"
        :border="false"
        password
        clearable
        @blur="passwordBlurNew"
        @input="passwordInputNew"
        placeholder="请再次输入新密码"
        :error-message="passwordErrorMsgNew"
      ></van-field>
      <!-- <van-field
        value="{{ password }}"
        type="password"
        label="密码"
        placeholder="请输入密码"
        required
        border="{{ false }}"
      />-->
    </van-cell-group>
    <!-- <div class="header">
      <div class="header_l cen_col">确认密码</div>
      <div class="header_r">
        <input type="password" placeholder="请再次输入新密码" v-model="password">
        </div>
      <div class="header_o"></div>
    </div>-->
    <!-- <div class="header cen">
      <div class="header_l cen_col">确认密码</div>
      <div class="header_r">
        <van-field v-model="password" password clearable placeholder="请再次输入新密码"></van-field>
      </div>
      <div class="header_o"></div>
    </div>-->
    <div class="footer" @click="btnComplete">完成</div>
    <van-toast id="van-toast" />
  </div>
</template>

<script>
import Toast from "@/../static/vant/toast/toast";
export default {
  data() {
    return {
      pass: "",
      password: "",
      old_password: "",
      passwordErrorMsg: "", // 密码提示
      passwordErrorMsgNew: ""
    };
  },
  onShow() {
    this.pass = "";
    this.password = "";
    this.old_password = "";
    this.passwordErrorMsg = "";
    this.passwordErrorMsgNew = "";
  },
  methods: {
    passwordBlurOld(event) {
      this.old_password = event.mp.detail.value;
    },
    passwordInputOld() {
      this.old_password = event.mp.detail;
    },
    passwordBlur() {
      this.pass = event.mp.detail.value;
      this.pass = this.pass.trim();
      if (this.pass.length < 6) {
        //        if (this.pass.length < 6 || this.pass.length > 20) { 密码长度在6到20之间
        //密码长度大于6
        if (this.pass.length === 0) {
          this.passwordErrorMsg = "您输入的密码不能为空";
        } else {
          this.passwordErrorMsg = "您输入的密码长度有误";
        }
      }
      /*----------------以上长度限制，以下格式限制---------------*/
      if (this.pass) {
        if (/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,}$/.test(this.pass)) {
          //          if (/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/.test(this.pass)) {
          this.passwordErrorMsg = "";
        } else {
          this.passwordErrorMsg = "密码至少6位大小写字母+数字";
          //            this.passwordErrorMsg = '您输入的密码格式有误';
        }
      } else if (this.pass == "") {
        this.passwordErrorMsg = "";
      } else {
        this.passwordErrorMsg = "输入的密码不能为空";
      }
    },
    //  至少6位大小写字母+数字 密码验证 长度限制11位
    passwordInput(event) {
      this.pass = event.mp.detail;
    },
    passwordBlurNew() {
      this.password = event.mp.detail.value;
      if (this.password != this.pass) {
        Toast("俩次密码不匹配请重新输入");
        this.passwordErrorMsgNew = "俩次密码不匹配请重新输入";
      } else {
        this.passwordErrorMsgNew = "";
      }
    },
    passwordInputNew(event) {
      this.password = event.mp.detail;
    },
    btnComplete() {
      if (!this.passwordErrorMsg && !this.passwordErrorMsgNew) {
        this.$http
          .post({
            url: "/mobile/api/setpassword",
            data: {
              old_password: this.old_password
                ? this.$md5(this.old_password)
                : "",
              password: this.$md5(this.password),
              customer_id: wx.getStorageSync("userInfo").customer_id
            }
          })
          .then(res => {
            if (res.code == "RX0000") {
              Toast("修改成功");
              wx.reLaunch({
                url: "/pages/firstView/main"
              });
            } else {
              Toast(res.msg);
            }
          });
      }
    }
  }
};
</script>

<style lang='less'>
page {
  background: rgba(249, 249, 249, 1);
}
#reportDetail {
  background: rgba(249, 249, 249, 1);
}
.header {
  width: 374px;
  height: 40px;
  background: rgba(255, 255, 255, 1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 16.81px 0 13px;
  box-sizing: border-box;
}
.header_l {
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(102, 102, 102, 1);
}
.header_r {
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(0, 0, 0, 1);
}
.cen {
  border: 2px #f9f9f9 dashed;
}
.cen_col {
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(0, 0, 0, 1);
}
.footer {
  margin: 55px auto;
  width: 340px;
  height: 44px;
  background-image: linear-gradient(to right, #38b5f8, #2162f8);
  font-size: 15px;
  border-radius: 46px;
  color: #ffffff;
  line-height: 44px;
  text-align: center;
}
.footer img {
  width: 340px;
  height: 44px;
}
</style>
